<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import luckybag from './component/luckybag.vue'
  import godchoose from './component/godchoose.vue'
  import myreward from './component/myreward.vue'

  // 商家中心账户
  const balance = ref()
  async function merchantAccount() {
    const res = await http.request({
      url: 'api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log(res)
    balance.value = res.data.data
  }

  const categary = ref(1)
  const status = ref(1)
  const rewardstatus = ref(0)

  function incomeDetails() {
    uni.navigateTo({
      url: `/minePage/incomedetails/index`,
    })
  }

  function cashDetails() {
    uni.navigateTo({
      url: `/minePage/cashdetails/index`,
    })
  }

  //筛选分类
  function chooseCategary(ca) {
    status.value = 1
    rewardstatus.value = 0
    categary.value = ca
  }

  function chooseStatus(st) {
    status.value = st
  }

  function chooseRewardStatus(st) {
    rewardstatus.value = st
  }

  function addPlay() {
    if (categary.value == 1) {
      uni.navigateTo({
        url: `/minePage/addluckybag/index`,
      })
    } else if (categary.value == 2) {
      uni.navigateTo({
        url: `/minePage/addgodchoose/index`,
      })
    } else {
      uni.navigateTo({
        url: `/minePage/addmyreward/index`,
      })
    }
  }

  function goCash() {
    uni.navigateTo({
      url: `/minePage/accountcash/index`,
    })
  }
  function toshopList() {
    uni.navigateTo({
      url: `/minePage/order/shop`,
    })
  }
  onShow(() => {
    merchantAccount()
  })
</script>

<template>
  <view class="business-content">
    <!-- 收入信息 -->
    <view class="top-money">
      <view class="top-left">
        <view class="revenue">
          <text class="all-text">总收入</text>
          <view class="all-details" @click="incomeDetails">明细></view>
        </view>
        <view class="revenue moneytext">
          <text class="all-money">￥{{ balance.shop_sum_in }}</text>
        </view>
      </view>

      <view class="top-left">
        <view class="revenue">
          <text class="all-text">可提现</text>
          <view class="all-details" @click="cashDetails">明细></view>
        </view>
        <view class="revenue moneytext">
          <text class="all-money">￥{{ balance.shop_balance }}</text>
          <view class="money-btn" @click="goCash">提现</view>
        </view>
      </view>
    </view>
    <!-- 标签 -->
    <view class="top-lable">
      <view class="lable-tit">
        <text
          class="lable-text"
          :class="{ 'category-active': categary == 1 }"
          @click="chooseCategary(1)"
          >我的福袋</text
        >
        <text
          class="lable-text"
          :class="{ 'category-active': categary == 2 }"
          @click="chooseCategary(2)"
          >我的天选</text
        >
        <text
          class="lable-text"
          :class="{ 'category-active': categary == 3 }"
          @click="chooseCategary(3)"
          >我的奖品</text
        >
      </view>
      <view class="lable-tit" v-if="categary == 3">
        <text
          class="lable-text"
          :class="{ 'status-active': rewardstatus == 0 }"
          @click="chooseRewardStatus(0)"
          >申请入库</text
        >
        <text
          class="lable-text"
          :class="{ 'status-active': rewardstatus == 1 }"
          @click="chooseRewardStatus(1)"
          >在库</text
        >
        <text
          class="lable-text"
          :class="{ 'status-active': rewardstatus == 2 }"
          @click="chooseRewardStatus(2)"
          >在售</text
        >
        <text
          class="lable-text"
          :class="{ 'status-active': rewardstatus == 3 }"
          @click="chooseRewardStatus(3)"
          >已售出</text
        >
      </view>

      <view class="lable-tit" v-else>
        <text
          class="lable-text"
          :class="{ 'status-active': status == 1 }"
          @click="chooseStatus(1)"
          >审核</text
        >
        <text
          class="lable-text"
          :class="{ 'status-active': status == 2 }"
          @click="chooseStatus(2)"
          >在售</text
        >
        <text
          class="lable-text"
          :class="{ 'status-active': status == 4 }"
          @click="chooseStatus(4)"
          >已下架</text
        >
        <text
          class="lable-text"
          :class="{ 'status-active': status == 3 }"
          @click="chooseStatus(3)"
          >已售罄</text
        >
      </view>
    </view>

    <luckybag
      v-show="categary == 1"
      :status="status"
      :categary="categary"
    ></luckybag>
    <godchoose
      v-show="categary == 2"
      :status="status"
      :categary="categary"
    ></godchoose>
    <myreward
      v-show="categary == 3"
      :status="rewardstatus"
      :categary="categary"
    ></myreward>

    <!-- 添加盲盒 -->
    <view class="bottom-box"> </view>
    <view class="bottom-round">
      <image
        @click="addPlay"
        src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/add-box.png"
        class=""
      ></image>
    </view>
    <view class="toShopIcon" @click="toshopList">
      <image
        style=""
        src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/message.png"
        mode="widthFix"
      ></image>
      <view class="shop_num">
        {{ balance.shop_delivery_num || 0 }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .toShopIcon {
    width: 120rpx;
    height: 120rpx;
    position: fixed;
    right: 40rpx;
    bottom: 240rpx;
    image {
      width: 100%;
      height: 100%;
    }
    .shop_num {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 500;
    }
  }
  .business-content {
    position: relative;
    // height: 100vh;
    padding: 0 17rpx;
    padding-bottom: 40rpx;
    box-sizing: border-box;
    background: #e9eaf2;
    // height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .top-money {
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    border-radius: 14rpx;
    border: 4rpx solid #bca4ed;
    margin: 15rpx auto;
    display: flex;
  }

  .top-lable {
    width: 100%;
    height: 180rpx;
    background-color: #fff;
    border-radius: 14rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .lable-tit {
      display: flex;
      margin-top: 28rpx;
      justify-content: space-between;
      width: 100%;
      height: 75rpx;
      border-bottom: 2rpx dashed #e5e5e5;
      &:last-child {
        border: none;
      }
    }

    .lable-text {
      width: 236rpx;
      text-align: center;
      height: 52rpx;
      font-size: 32rpx;
      color: #808080;
    }
    .category-active {
      color: #000 !important;
    }
    .status-active {
      color: rgba(121, 72, 234, 1);
    }
  }

  .top-left {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 2rpx solid #e5e5e5;
    // background-color: #00BAAF;
  }

  .revenue {
    display: flex;
    margin: 20rpx;
    // width: 100%;
    height: 50rpx;
    justify-content: space-between;

    .all-text {
      font-size: 28rpx;
      color: rgba(121, 72, 234, 1);
      line-height: 50rpx;
    }

    .all-details {
      font-size: 18rpx;
      color: #808080;
      line-height: 50rpx;
    }

    .all-money {
      font-size: 32rpx;
      color: #000;
      font-weight: 500;
      line-height: 52rpx;
    }
  }

  .moneytext {
    margin-top: -4rpx;
  }

  .money-btn {
    width: 80rpx;
    height: 52rpx;
    background: rgba(161, 117, 255, 1);
    border-radius: 14rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 52rpx;
  }

  .bottom-box {
    width: 100%;
    height: 84rpx;
    background: #fff;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.12);
  }
  .bottom-round {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 153rpx;
    height: 153rpx;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.12);
    image {
      width: 100rpx;
      height: 100rpx;
      left: 325rpx;
    }
  }
</style>
